<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giphy-Search</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

    </head>
    <style>
        
body {
	width: 80%;
	max-width: 1024px;
	margin: 0 auto;
	background: rgb(20, 20, 20);
}

.container-padding50 {
	padding-top: 50px;
}

.container-textinput {
	width: 80%;
	display: inline-block;
	padding: 20px;
	font-size: 16px;
	font-family: Helvetica, sans-serif;
}

.container-button {
	width: 14%;
	display: inline-block;
	padding: 20px;
	background-color: #f74a4a;
	color: white;
	font-size: 16px;
	font-family: Helvetica, sans-serif;

	border: 1px solid green;
	border-radius: 5px;
}
.container-button:hover{
    background-color: #f16969;
}
.container-image {
	width: 30%;
	display: block;
	float: left;
	margin-right:3%;
}
    </style>
<body>
    <h1 class="text-center h1-responsive" style="font-family: 'Montserrat', sans-serif;font-size: 50px;color: white;">Giphy Search Engine</h1>
    <div class="container container-padding50">
        <input type="text" class="js-userinput container-textinput" placeholder="search here" />
        <button class="js-go container-button">Go!</button>
    </div>

    <div class="container container-padding50 var-container">
        
    </div>
    
    <div class="container container-padding50 js-container">

    </div>

</body>
<script>
    /* 1. Grab the input value */


document.querySelector(".js-go").addEventListener('click', function () {

var input = document.querySelector("input").value;

getData();

});

document.querySelector(".js-userinput").addEventListener('keyup', function (e) {

var input = document.querySelector("input").value;


//ENTER 
if (e.which === 13) {
 
    getData();
}

});

function getData() {

/* 2. do the data stuff with the API */
var url = "https://api.giphy.com/v1/gifs/search?q=";
var input = document.querySelector("input").value;
var key = "&api_key=dc6zaTOxFJmzC";
var fullUrl = url+input+key


var GiphyAJAXCall = new XMLHttpRequest();
GiphyAJAXCall.open('GET', fullUrl);
GiphyAJAXCall.send();

GiphyAJAXCall.addEventListener('load', function (e) {

    var data = e.target.response;
  
    var response = JSON.parse(data);

    var imageUrls = response.data;

    imageUrls.forEach(function (image) {

        var src = image.images.fixed_height.url;
     

        var container = document.querySelector(".js-container");
        container.innerHTML += "<img src=\"" + src + "\" class=\"container-image\">";

    });

});
}

/* 3. Show me the GIFs */

function pushToDOM(input) {

var cont = document.querySelector(".var-container");
cont.innerHTML = input;


}










</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>